<!--  -->
<template>
  <div>
      <el-input @input="changeValue" v-model="datavalue">
          <template slot="prepend">=</template>
      </el-input>
      <el-popover
        v-model="popup"
        placement="top"
        trigger="manual">
        <div class="el-scrollbar">
          <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -17px;margin-right: -17px;">
            <ul class="el-scrollbar__view el-select-dropdown__list">
              <ul class="el-select-group__wrap"
                v-for="group in valuelist"
                :key="group.label">
                <li class="el-select-group__title">{{group.label}}</li>
                <li >
                  <ul class="el-scrollbar__view el-select-dropdown__list"
                  v-for="item in group.options"
                  :key="item.value"
                  >
                    <li @click="selectValue(item.value)" class="el-select-dropdown__item">{{item.value}}</li>
                  </ul>
                </li>
              </ul>
            </ul>
          </div>
        </div>
      </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    valuelist: {
      type: Array,
      default: () => {
        return [{
          label: 'Popular cities',
          options: [{
            value: 'Shanghai',
            label: 'Shanghai'
          }, {
            value: 'Beijing',
            label: 'Beijing'
          }]
        }, {
          label: 'City name',
          options: [{
            value: 'Chengdu',
            label: 'Chengdu'
          }, {
            value: 'Shenzhen',
            label: 'Shenzhen'
          }, {
            value: 'Guangzhou',
            label: 'Guangzhou'
          }, {
            value: 'Dalian',
            label: 'Dalian'
          }]
        }]
      }
    }
  },
  data () {
    return {
      popup: false,
      datavalue: '',
      valuelistClone: {}
    }
  },
  created () {
    this._.merge(this.valuelistClone, this.valuelist)
  },
  methods: {
    changeValue (newvalue) {
      if (this.datavalue === newvalue) {
        this.popup = true
      } else {
        this.popup = false
      }
    },
    selectValue (value) {
      this.datavalue += value
      this.popup = false
      this.filterDataValue(value)
    },
    filterDataValue (value) {
      // this.valuelist=[]
      // this._.forEach(this.valuelistClone, function (group) {
      //   for (var i = 0; i < group.options.length; i++) {
      //   }
      // })
    }
  }
}
</script>

<style scoped>
</style>
